<template>
  <div class="func-comp-form">

    <ComponentGlobalSettingForm :id="id" :compConfigData="compConfigData"></ComponentGlobalSettingForm>

    <Tabs name="main_tabs" size="small" v-model="mainTabsValue">
      <TabPane name="main_tab" tab="main_tabs" label="主配置">

        <Form :label-width="110">

          <Collapse value="1">
            <Panel name="1">
              常规配置
              <div slot="content">
                <FormItem label="系列名称">
                  <Input size="small" v-model="chartOption.series[0].name" placeholder=""/>
                </FormItem>
                <FormItem label="仪表盘半径">
                  <Input size="small" v-model="chartOption.series[0].radius" placeholder=""/>
                </FormItem>
                <FormItemPanel title="仪表盘起始与结束角度配置">
                  <Alert style="padding: 5px; text-align: justify;">
                    圆心正右手侧为0度，正上方为90度，正左手侧为180度
                  </Alert>
                  <FormItem label="起始角度">
                    <InputNumber size="small" :max="360" :min="-360" v-model="chartOption.series[0].startAngle"></InputNumber>
                  </FormItem>
                  <FormItem label="结束角度">
                    <InputNumber size="small" :max="360" :min="-360" v-model="chartOption.series[0].endAngle"></InputNumber>
                  </FormItem>
                </FormItemPanel>
                <FormItem label="是否顺时针增长">
                  <i-switch v-model="chartOption.series[0].clockwise">
                    <span slot="open"></span>
                    <span slot="close"></span>
                  </i-switch>
                </FormItem>
                <FormItem label="最小值">
                  <InputNumber size="small" v-model="chartOption.series[0].min"></InputNumber>
                </FormItem>
                <FormItem label="最大值">
                  <InputNumber size="small" v-model="chartOption.series[0].max"></InputNumber>
                </FormItem>
                <FormItem label="刻度分割段数">
                  <InputNumber size="small" v-model="chartOption.series[0].splitNumber"></InputNumber>
                </FormItem>
              </div>
            </Panel>
            <Panel name="2">
              轴线样式配置<ShowToggle class="float-right" v-model="chartOption.series[0].axisLine.show"></ShowToggle>
              <div slot="content">
                <FormItem label="显示">
                  <i-switch v-model="chartOption.series[0].axisLine.show">
                    <span slot="open"></span>
                    <span slot="close"></span>
                  </i-switch>
                </FormItem>
                <FormItemPanel title="分段色值">
                  <Alert style="padding: 5px; text-align: justify;">
                    仪表盘的轴线可以被分成不同颜色的多段。每段的结束位置和颜色可以通过一个数组来表示
                    <a href="https://echarts.apache.org/zh/option.html#series-gauge.axisLine.lineStyle.color" target="_blank">参考资料</a>
                  </Alert>
                  <Button size="small" class="float-right" type="primary" @click="addAxisLineColor">新增分段颜色</Button>
                  <div class="clearfix"></div>
                  <div class="m-t-5px"></div>
                  <FormItem :label="'分段'+(index+1)" v-for="(item, index) in chartOption.series[0].axisLine.lineStyle.color" :key="index">
                    <InputNumber size="small" :max="1" :min="0" :step="0.1" v-model="item[0]" style="width: 50px;"></InputNumber>
                    <PnColorPicker size="small" v-model="item[1]" alpha recommend/>
                    <a class="m-l-5px" href="javascript:;" style="color: #FFF;" @click.stop="deleteAxisLineColor(index)"><Icon type="md-trash" /></a>
                  </FormItem>
                </FormItemPanel>
                <FormItem label="宽度">
                  <InputNumber size="small" v-model="chartOption.series[0].axisLine.lineStyle.width"></InputNumber>
                </FormItem>
                <FormItem label="阴影大小">
                  <InputNumber size="small" v-model="chartOption.series[0].axisLine.lineStyle.shadowBlur"></InputNumber>
                </FormItem>
                <FormItem label="阴影颜色">
                  <PnColorPicker size="small" v-model="chartOption.series[0].axisLine.lineStyle.shadowColor" alpha recommend/>
                </FormItem>
              </div>
            </Panel>
            <Panel name="3">
              分隔线样式配置<ShowToggle class="float-right" v-model="chartOption.series[0].splitLine.show"></ShowToggle>
              <div slot="content">
                <FormItem label="显示">
                  <i-switch v-model="chartOption.series[0].splitLine.show">
                    <span slot="open"></span>
                    <span slot="close"></span>
                  </i-switch>
                </FormItem>
                <FormItem label="线长">
                  <InputNumber size="small" v-model="chartOption.series[0].splitLine.length"></InputNumber>
                </FormItem>
                <FormItem label="颜色">
                  <PnColorPicker size="small" v-model="chartOption.series[0].splitLine.lineStyle.color" alpha recommend/>
                </FormItem>
                <FormItem label="线宽">
                  <InputNumber size="small" v-model="chartOption.series[0].splitLine.lineStyle.width"></InputNumber>
                </FormItem>
                <FormItem label="类型">
                  <Select :transfer="true" size="small" v-model="chartOption.series[0].splitLine.lineStyle.type">
                    <Option v-for="item in $PnDict.borderStyles" :value="item.value" :key="item.value">{{ item.label }}</Option>
                  </Select>
                </FormItem>
                <FormItem label="阴影大小">
                  <InputNumber size="small" v-model="chartOption.series[0].splitLine.lineStyle.shadowBlur"></InputNumber>
                </FormItem>
                <FormItem label="阴影颜色">
                  <PnColorPicker size="small" v-model="chartOption.series[0].splitLine.lineStyle.shadowColor" alpha recommend/>
                </FormItem>
              </div>
            </Panel>
            <Panel name="4">
              刻度样式配置<ShowToggle class="float-right" v-model="chartOption.series[0].axisTick.show"></ShowToggle>
              <div slot="content">
                <FormItem label="显示">
                  <i-switch v-model="chartOption.series[0].axisTick.show">
                    <span slot="open"></span>
                    <span slot="close"></span>
                  </i-switch>
                </FormItem>
                <FormItem label="分割线间刻度数">
                  <InputNumber size="small" v-model="chartOption.series[0].axisTick.splitNumber"></InputNumber>
                </FormItem>
                <FormItem label="线长">
                  <InputNumber size="small" v-model="chartOption.series[0].axisTick.length"></InputNumber>
                </FormItem>
                <FormItem label="颜色">
                  <PnColorPicker size="small" v-model="chartOption.series[0].axisTick.lineStyle.color" alpha recommend/>
                </FormItem>
                <FormItem label="线宽">
                  <InputNumber size="small" v-model="chartOption.series[0].axisTick.lineStyle.width"></InputNumber>
                </FormItem>
                <FormItem label="类型">
                  <Select :transfer="true" size="small" v-model="chartOption.series[0].axisTick.lineStyle.type">
                    <Option v-for="item in $PnDict.borderStyles" :value="item.value" :key="item.value">{{ item.label }}</Option>
                  </Select>
                </FormItem>
                <FormItem label="阴影大小">
                  <InputNumber size="small" v-model="chartOption.series[0].axisTick.lineStyle.shadowBlur"></InputNumber>
                </FormItem>
                <FormItem label="阴影颜色">
                  <PnColorPicker size="small" v-model="chartOption.series[0].axisTick.lineStyle.shadowColor" alpha recommend/>
                </FormItem>
              </div>
            </Panel>
            <Panel name="5">
              刻度标签样式配置<ShowToggle class="float-right" v-model="chartOption.series[0].axisLabel.show"></ShowToggle>
              <div slot="content">
                <FormItem label="显示">
                  <i-switch v-model="chartOption.series[0].axisLabel.show">
                    <span slot="open"></span>
                    <span slot="close"></span>
                  </i-switch>
                </FormItem>
                <FormItem label="标签与刻度线距离">
                  <InputNumber size="small" v-model="chartOption.series[0].axisLabel.distance"></InputNumber>
                </FormItem>
                <FormItem label="颜色">
                  <PnColorPicker size="small" v-model="chartOption.series[0].axisLabel.color" alpha recommend/>
                </FormItem>
                <FormItem label="字体粗细">
                  <Select :transfer="true" size="small" v-model="chartOption.series[0].axisLabel.fontWeight">
                    <Option v-for="item in $PnDict.fontWeights" :value="item.value" :key="item.value">{{ item.label }}</Option>
                  </Select>
                </FormItem>
                <FormItem label="字体大小">
                  <InputNumber size="small" v-model="chartOption.series[0].axisLabel.fontSize"></InputNumber>
                </FormItem>
                <FormItem label="背景色">
                  <PnColorPicker size="small" v-model="chartOption.series[0].axisLabel.backgroundColor" alpha recommend/>
                </FormItem>
                <FormItem label="边框颜色">
                  <PnColorPicker size="small" v-model="chartOption.series[0].axisLabel.borderColor" alpha recommend/>
                </FormItem>
                <FormItem label="边框大小">
                  <InputNumber size="small" v-model="chartOption.series[0].axisLabel.borderWidth"></InputNumber>
                </FormItem>
                <FormItem label="边框圆角尺寸">
                  <InputNumber size="small" v-model="chartOption.series[0].axisLabel.borderRadius"></InputNumber>
                </FormItem>
                <FormItem label="内边距">
                  <InputNumber size="small" v-model="chartOption.series[0].axisLabel.padding"></InputNumber>
                </FormItem>
                <FormItem label="阴影颜色">
                  <PnColorPicker size="small" v-model="chartOption.series[0].axisLabel.shadowColor" alpha recommend/>
                </FormItem>
                <FormItem label="阴影大小">
                  <InputNumber size="small" v-model="chartOption.series[0].axisLabel.shadowBlur"></InputNumber>
                </FormItem>
              </div>
            </Panel>
            <Panel name="6">
              仪表盘指针样式配置<ShowToggle class="float-right" v-model="chartOption.series[0].pointer.show"></ShowToggle>
              <div slot="content">
                <FormItem label="显示">
                  <i-switch v-model="chartOption.series[0].pointer.show">
                    <span slot="open"></span>
                    <span slot="close"></span>
                  </i-switch>
                </FormItem>
                <FormItem label="指针长度">
                  <Input size="small" v-model="chartOption.series[0].pointer.length" placeholder=""/>
                </FormItem>
                <FormItem label="指针宽度">
                  <InputNumber size="small" v-model="chartOption.series[0].pointer.width"></InputNumber>
                </FormItem>
                <FormItem label="颜色">
                  <PnColorPicker size="small" v-model="chartOption.series[0].pointer.itemStyle.color" alpha recommend/>
                </FormItem>
                <FormItem label="边框颜色">
                  <PnColorPicker size="small" v-model="chartOption.series[0].pointer.itemStyle.borderColor" alpha recommend/>
                </FormItem>
                <FormItem label="边框大小">
                  <InputNumber size="small" v-model="chartOption.series[0].pointer.itemStyle.borderWidth"></InputNumber>
                </FormItem>
                <FormItem label="边框类型">
                  <Select :transfer="true" size="small" v-model="chartOption.series[0].pointer.itemStyle.borderType">
                    <Option v-for="item in $PnDict.borderStyles" :value="item.value" :key="item.value">{{ item.label }}</Option>
                  </Select>
                </FormItem>
                <FormItem label="阴影颜色">
                  <PnColorPicker size="small" v-model="chartOption.series[0].pointer.itemStyle.shadowColor" alpha recommend/>
                </FormItem>
                <FormItem label="阴影大小">
                  <InputNumber size="small" v-model="chartOption.series[0].pointer.itemStyle.shadowBlur"></InputNumber>
                </FormItem>
                <FormItem label="透明度">
                  <InputNumber size="small" :max="1" :min="0" :step="0.1" v-model="chartOption.series[0].pointer.itemStyle.opacity"></InputNumber>
                </FormItem>
              </div>
            </Panel>
            <Panel name="7">
              仪表盘标题样式配置<ShowToggle class="float-right" v-model="chartOption.series[0].title.show"></ShowToggle>
              <div slot="content">
                <FormItem label="显示">
                  <i-switch v-model="chartOption.series[0].title.show">
                    <span slot="open"></span>
                    <span slot="close"></span>
                  </i-switch>
                </FormItem>
                <FormItemPanel title="相对中心偏移位置">
                  <FormItem label="横向偏移">
                    <Input size="small" v-model="chartOption.series[0].title.offsetCenter[0]" placeholder=""/>
                  </FormItem>
                  <FormItem label="纵向偏移">
                    <Input size="small" v-model="chartOption.series[0].title.offsetCenter[1]" placeholder=""/>
                  </FormItem>
                </FormItemPanel>
                <FormItem label="颜色">
                  <PnColorPicker size="small" v-model="chartOption.series[0].title.color" alpha recommend/>
                </FormItem>
                <FormItem label="字体粗细">
                  <Select :transfer="true" size="small" v-model="chartOption.series[0].title.fontWeight">
                    <Option v-for="item in $PnDict.fontWeights" :value="item.value" :key="item.value">{{ item.label }}</Option>
                  </Select>
                </FormItem>
                <FormItem label="字体大小">
                  <InputNumber size="small" :max="1000" :min="0" v-model="chartOption.series[0].title.fontSize"></InputNumber>
                </FormItem>
                <FormItem label="背景色">
                  <PnColorPicker size="small" v-model="chartOption.series[0].title.backgroundColor" alpha recommend/>
                </FormItem>
                <FormItem label="边框颜色">
                  <PnColorPicker size="small" v-model="chartOption.series[0].title.borderColor" alpha recommend/>
                </FormItem>
                <FormItem label="边框大小">
                  <InputNumber size="small" :max="1000" :min="0" v-model="chartOption.series[0].title.borderWidth"></InputNumber>
                </FormItem>
                <FormItem label="边框圆角尺寸">
                  <InputNumber size="small" :max="1000" :min="0" v-model="chartOption.series[0].title.borderRadius"></InputNumber>
                </FormItem>
                <FormItem label="内边距">
                  <InputNumber size="small" :max="1000" :min="0" v-model="chartOption.series[0].title.padding"></InputNumber>
                </FormItem>
                <FormItem label="阴影颜色">
                  <PnColorPicker size="small" v-model="chartOption.series[0].title.shadowColor" alpha recommend/>
                </FormItem>
                <FormItem label="阴影大小">
                  <InputNumber size="small" :max="1000" :min="0" v-model="chartOption.series[0].title.shadowBlur"></InputNumber>
                </FormItem>
              </div>
            </Panel>
            <Panel name="8">
              仪表盘详情（显示数据）配置<ShowToggle class="float-right" v-model="chartOption.series[0].detail.show"></ShowToggle>
              <div slot="content">
                <FormItem label="显示">
                  <i-switch v-model="chartOption.series[0].detail.show">
                    <span slot="open"></span>
                    <span slot="close"></span>
                  </i-switch>
                </FormItem>
                <FormItemPanel title="相对中心偏移位置">
                  <FormItem label="横向偏移">
                    <Input size="small" v-model="chartOption.series[0].detail.offsetCenter[0]" placeholder=""/>
                  </FormItem>
                  <FormItem label="纵向偏移">
                    <Input size="small" v-model="chartOption.series[0].detail.offsetCenter[1]" placeholder=""/>
                  </FormItem>
                </FormItemPanel>
                <FormItemPanel title="格式化">
                  <CodeEditor v-model="chartOption.series[0].detail.formatter"></CodeEditor>
                </FormItemPanel>
                <FormItem label="颜色">
                  <PnColorPicker size="small" v-model="chartOption.series[0].detail.color" alpha recommend/>
                </FormItem>
                <FormItem label="字体粗细">
                  <Select :transfer="true" size="small" v-model="chartOption.series[0].detail.fontWeight">
                    <Option v-for="item in $PnDict.fontWeights" :value="item.value" :key="item.value">{{ item.label }}</Option>
                  </Select>
                </FormItem>
                <FormItem label="字体大小">
                  <InputNumber size="small" :max="1000" :min="0" v-model="chartOption.series[0].detail.fontSize"></InputNumber>
                </FormItem>
                <FormItem label="背景色">
                  <PnColorPicker size="small" v-model="chartOption.series[0].detail.backgroundColor" alpha recommend/>
                </FormItem>
                <FormItem label="边框颜色">
                  <PnColorPicker size="small" v-model="chartOption.series[0].detail.borderColor" alpha recommend/>
                </FormItem>
                <FormItem label="边框大小">
                  <InputNumber size="small" :max="1000" :min="0" v-model="chartOption.series[0].detail.borderWidth"></InputNumber>
                </FormItem>
                <FormItem label="边框圆角尺寸">
                  <InputNumber size="small" :max="1000" :min="0" v-model="chartOption.series[0].detail.borderRadius"></InputNumber>
                </FormItem>
                <FormItem label="内边距">
                  <InputNumber size="small" :max="1000" :min="0" v-model="chartOption.series[0].detail.padding"></InputNumber>
                </FormItem>
                <FormItem label="阴影颜色">
                  <PnColorPicker size="small" v-model="chartOption.series[0].detail.shadowColor" alpha recommend/>
                </FormItem>
                <FormItem label="阴影大小">
                  <InputNumber size="small" :max="1000" :min="0" v-model="chartOption.series[0].detail.shadowBlur"></InputNumber>
                </FormItem>
              </div>
            </Panel>
            <Panel name="9" v-if="chartOption.title">
              标题
              <ShowToggle class="float-right" v-model="chartOption.title.show"></ShowToggle>
              <div slot="content">
                <EchartsTitleConfigForm v-model="chartOption.title"></EchartsTitleConfigForm>
              </div>
            </Panel>
            <Panel name="10">
              其他
              <div slot="content">
                <EchartsOtherConfigForm v-model="compConfigData"></EchartsOtherConfigForm>
              </div>
            </Panel>
          </Collapse>

        </Form>

      </TabPane>
      <TabPane name="extend_tab" tab="main_tabs" label="扩展配置">
        <Container v-if="mainTabsValue == 'extend_tab'">
          <CustomOptionDocument :componentId="id"></CustomOptionDocument>
          <CodeEditor v-model="customOption" mode="json"></CodeEditor>
          <EchartsSpreadingCodeForm v-model="echartsSpreadingCode"></EchartsSpreadingCodeForm>
        </Container>
      </TabPane>
      <TabPane name="datasource_tab" tab="main_tabs" label="数据源">
        <DatasourceState v-if="mainTabsValue == 'datasource_tab'" targetComp="BaseGaugeChart"></DatasourceState>
      </TabPane>
      <TabPane name="interaction_tab" tab="main_tabs" label="交互">
        <Container v-if="mainTabsValue == 'interaction_tab'">
          <InteractionReceive></InteractionReceive>
          <CustomJsDocument></CustomJsDocument>
          <FormItemPanel title="初始化运行脚本">
            <CodeEditor v-model="customGlobalJsCode"></CodeEditor>
          </FormItemPanel>

          <FormItemPanel title="数据项点击时运行">
            <InteractionSender :interactionKey="'itemClick'"></InteractionSender>
            <Alert style="padding: 5px;">此脚本中，使用_this指向当前组件vm实例，通过params可获取点击项数据</Alert>
            <CodeEditor v-model="dataItemClickJsCode"></CodeEditor>
          </FormItemPanel>
        </Container>
      </TabPane>
    </Tabs>

  </div>
</template>

<script>

  import FuncCompFormMixin from '@/mixin/FuncCompFormMixin'

  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getLayoutItem',
    mutationType: 'designer/updateLayoutItem',
  });

  export default {
    name: 'BaseGaugeChartForm', // 此名称必须填写，且必须与组件文件名相同，并且必须加上Form字符
    mixins: [FuncCompFormMixin],
    data() {
      return {

      }
    },
    mounted() {

    },
    methods: {
      addAxisLineColor () {
        this.chartOption.series[0].axisLine.lineStyle.color.push([0, ''])
      },
      deleteAxisLineColor (index) {
        this.chartOption.series[0].axisLine.lineStyle.color.splice(index, 1)
      }
    },
    computed: {
      ...mapFields({

        chartOption: 'component.compConfigData.chartOption'

      })
    }
  }
</script>

<style scoped>

</style>
